/* 对于导航栏, 后续每个页面都需要, 因此将样式单独取出来 */
/* 写样式前需要除去浏览器得公共样式, 并且设置border_box */
/* 避免元素盒子被内边距和边框撑大, 导致后续元素分布出现问题 */
/*  *{里面内容为通配符选择器,所有得标签都会被选取} */
* {
    /* 去除外边距 */
  margin: 0;  
  /* 去除内边距 */
  padding: 0;
  /* 去除 */
  box-sizing: border-box;
}

/*  html 是页面得最顶层元素, 高度100%是相对父元素来说高度为100%
    对于html 标签来说, 父元素就是浏览器窗口, 浏览器多高html多高
    body 得父亲为html, 设为100%得意思为body和html一样高
    此时 body 和html得高度都是和浏览器窗口一样高得 */
html, body {
    height: 100%;
}

body {
    /* 背景图片应用于所有页面中 */
    /* 相对路径基准路径为当前文件所在路径 */
    /* 比image更容易控制图片在盒子中得位置 */
    /* url必须写 可以为相对路径或者绝对路径 可加可不加引号 */
    background-image: url(../Imag/背景图片.jpg);

    /* 设置延展开后不平铺 否则延展开后有多张重复背景图 */
    background-repeat: no-repeat;

    /* cover 和 contain得区别 cover大致为覆盖满 contain有边角*/
    background-size: cover;

    /* 背景图片位置 水平且垂直居中 */
    background-position: center center;

}

/* 导航栏样式优化 */
.nav {
    /* 设置宽度和父元素一样宽 */
    /* 块级元素默认 width: 100% */
    width: 100%;
     
    /* 设置高度为50px */
    height: 45px;

    /* 导航栏背景颜色 */
    background-color: rgba(60, 60, 60, 0.4);

    color: white;

    /* 由于导航栏中元素均为水平排列 故使用弹性布局设置 */
    display: flex;

    /* 设置垂直方向上得元素居中, 该主轴为垂直方向 */
    align-items: center;

}


/* 对导航栏头像修改 */
.nav img {

    width: 40px;
    height:40px;
    margin-left: 30px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* 将头像变成圆圈, 将内切圆半径设置为高度得一半正好为一个圆 */
    border-radius: 50%;

}

/* 对导航栏中得功能和头像进行布局修改 */
.nav .spacer {
    width: 75%;
}

.nav a {
    color: white;

    /* 去掉链接下划线 */
    text-decoration: none;

    /* 加上内边距 将三个功能标签分开 */
    /* 内边距得多种写法 遵守上右下左顺时针方向 */
    /* 两个参数表示 上下 左右 */
    padding: 0 10px;
}

/* 调整整体页面样式 */
.container {
    /* 设置左右两侧页面占整个浏览器页面布局得宽度 */
    width: 1200px;

    /* background-color: red; */

    /* 高度能够填充整个页面 */
    height: calc(100% - 45px);

    /* 水平居中 */
    margin: 0 auto;

    /* 左右两侧为水平布局 */
    display: flex;

    /* 水平元素垂直居中 */
    align-items: center;

    padding-top: 5px;

    /* just - content 设置株洲上得子元素排列方式 */
    /* space - between 先两边元素贴近边缘, 在平分剩余空间 */
    /* space - arount 平分了剩余空间 */
    /* center 此时元素全部居中排列 */
    /* flex - end 此时元素都排列到右侧 */
    justify-content: space-between;
}

/* 调整左侧页面整体样式 */
.container-left {
    height: 100%;

    /* 整体大页面为1200px 划出300 给左边页面布局 */
    width: 290px;

    /* 背景色观察整体大小 */
    /* background-color: rgba(255, 255, 255, 0.6); */

    /* border-radius: 10px; */
}

.container-right {
    height: 100%;

    /* 整体为1200px 左侧为300px 右侧为900px */
    width: 890px;

    /* 调整背景颜色 */
    background-color: rgba(255, 255, 255, 0.2);

    /* 边角圆形 */
    border-radius: 10px;

    /* 让这个元素自己能带上滚动条 */
    /* 该属性表示当前内容无溢出则无滚动条, 否则则有 */
    overflow: auto;
}

/* 调整左侧用户信息 */
.user {

    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 10px;

    padding: 20px;
}

/* 左侧用户头像调整 */
.user img {
    display: flex;
    width: 150px;
    height: 140px;
    border-radius: 50%;
    margin: auto;
    align-items: center;
    
}

/* 调整用户名字 */
.user h3 {
    /* 文字水平居中 */
    text-align: center;

    padding: 10px;
}

/* 调整用户得 gitee 地址 */
.user a {
    /* 由于 a 标签是一个行内元素 有很多不适应的地方 */
    /* 为了配合上述样式， 将行内元素转为块内元素 */
    display: block;

    /* 设置文本居中 */
    text-align: center;

    /* 设置地址颜色 */
    color: black;

    /* 去除下划线 */
    text-decoration: none;

    /* 设置内边距和上下隔离开 */
    padding: 10px;
}

/* 调整文章以及数量样式 */
.user .counter {
    /* 为了让里面水平排列 使用弹性布局 */
    display: flex;

    justify-content: space-around;

    padding: 5px;

    /* padding-left: 10px; */


}






